<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>商家添加</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<jsp:include page="/pub.jsp"></jsp:include>
<script type="text/javascript">
	var aotemaiShop_edit_submitForm = function(dialog, aotemaiShop_datagrid, p) {
		if ($('#aotemaiShop_editForm').form('validate')) {
			$.post('${pageContext.request.contextPath}/aotemaiShop/edit', $("#aotemaiShop_editForm").serialize(), function(j) {
				if (j.success) {
					aotemaiShop_datagrid.datagrid('reload');
					dialog.dialog('destroy');
				}
				p.messager.show({
					title : '提示',
					msg : j.msg,
					timeout : 5000,
					showType : 'slide'
				});
			}, 'json');
		}
	};
	function mapSearch() {
		var dialog = parent.modalDialog({
			id:'baidumap_search_iframe',
			title : '选择经纬度',
			width : 800,
			height : 500,
			url : '${pageContext.request.contextPath}/mapUI',
			buttons : [ {
				text : '提交',
				handler : function() {
					var longitude = $('#longitude');
					var latitude = $('#latitude');
					dialog.find('iframe').get(0).contentWindow.mapSearch_submitForm(dialog, parent.$, longitude, latitude);
				}
			} ]
		});
	};
	// 初始化搜索框
	$(function(){
		$('#longitude').textbox({
			icons: [{
				iconCls:'icon-search',
				handler: function(e){
					mapSearch();
				}
			}]
		});
	});
</script>
</head>

<body>
	<form id="aotemaiShop_editForm" method="post">
		<input type="hidden" name="id" value="${aotemaiShop.id }"/>
		<table style="width: 100%;" class="table table-hover table-condensed">
			<tr>
				<th>名称</th>
				<td><input name="name" value="${aotemaiShop.name }" style="width: 100%;" class="easyui-validatebox" data-options="required:true,missingMessage:'必填'"/></td>
			</tr>
			</tr>
				<th>省/市/区/乡镇</th>
				<td>
					<select id="Select1" name="provinceId" autocomplete="off"></select>
					<select id="Select2" name="cityId" autocomplete="off"></select>
					<select id="Select3" name="regionId" autocomplete="off"></select>
					<select id="Select4" name="townId" autocomplete="off"></select>
				</td>
			</tr>
			<tr>
				<th>详细地址</th>
				<td><input name="address" value="${aotemaiShop.address }" placeholder="填写街道后面的地址" style="width: 100%;" class="easyui-validatebox" data-options="required:true,missingMessage:'必填'"/></td>
			</tr>
			<tr>
				<th>经度</th>
				<td><input  id="longitude" value="${aotemaiShop.longitude }" name="longitude" style="width: 100%;" class="easyui-numberbox" data-options="required:true,precision:6,validType:'intOrFloat'" /></td>
			</tr>
			<tr>
				<th>纬度</th>
			    <td><input id="latitude" value="${aotemaiShop.latitude }" name="latitude" style="width: 100%;" class="easyui-numberbox" data-options="required:true,precision:6,validType:'intOrFloat'" /></td>
			</tr>
			<tr>
				<th>邮箱</th>
				<td><input name="email" value="${aotemaiShop.email }" style="width: 100%;" class="easyui-validatebox" data-options="validType:'email'"/></td>
			</tr>
			<tr>
				<th>电话</th>
				<td><input name="mobile" value="${aotemaiShop.mobile }" style="width: 100%;" class="easyui-validatebox" data-options="validType:'phoneAndMobile',required:true,missingMessage:'必填'"/></td>
			</tr>
			<tr>
				<th>备注</th>
				<td>
				<%-- <input name="remark" value="${aotemaiShop.remark }" style="width: 100%;" class="easyui-validatebox" data-options=""/> --%>
				<textarea name="remark" cols="50" rows="4" >${aotemaiShop.remark }</textarea>
				</td>
			</tr>
		</table>
	</form>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/city.js"></script>
<script type="text/javascript">
var fourSelectData = _cityJSON;

/*
通用四级联动说明
参数配置如下，配置select的四个ID和默认值就行，无默认值填写为null，v1-v4可省略
var defaults = {
s1:'Select1',
s2:'Select2',
s3:'Select3',
s4:'Select3',
v1:null,
v2:null,
v3:null,
v4:null
};
*/
var defaults = {
   s1: 'Select1',
   s2: 'Select2',
   s3: 'Select3',
   s4: 'Select4',
   v1: "${aotemaiShop.provinceId }",
   v2: "${aotemaiShop.cityId }",
   v3: "${aotemaiShop.regionId }",
   v4: "${aotemaiShop.townId }"
};
$(function() {
	   fourSelect(defaults);
});
function fourSelect(config) {
   var $s1 = $("#" + config.s1);
   var $s2 = $("#" + config.s2);
   var $s3 = $("#" + config.s3);
   var $s4 = $("#" + config.s4);
   var v1 = config.v1 ? config.v1 : null;
   var v2 = config.v2 ? config.v2 : null;
   var v3 = config.v3 ? config.v3 : null;
   var v4 = config.v4 ? config.v4 : null;
   $.each(fourSelectData, function(k, v) {
       appendOptionTo($s1, k, v.val, v1);
   });
   $s1.change(function() {
       $s2.html("");
       if (this.selectedIndex == -1)
           return;
       var s1_curr_val = this.options[this.selectedIndex].value;
       if(s1_curr_val == undefined || s1_curr_val == ''){
	   }else{
		   appendOptionTo($s2, "请选择城市", '', v2);
	   }
       $.each(fourSelectData, function(k, v) {
           if (s1_curr_val == v.val) {
               if (v.items) {
                   $.each(v.items, function(k, v) {
                       appendOptionTo($s2, k, v.val, v2,1);
                   });
               }
           }
       });
       if ($s2[0].options.length == 0) {
           appendOptionTo($s2, "...", "", v2,1);
       }
       $s2.change();
   }).change();
   $s2.change(function() {
       $s3.html("");
       if (this.selectedIndex == -1)
           return;
       var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
       var s2_curr_val = this.options[this.selectedIndex].value;
       if(s2_curr_val == undefined || s2_curr_val == ''){
	   }else{
		   appendOptionTo($s3, "请选择区县", '', v2);
	   }
       $.each(fourSelectData, function(k, v) {
           if (s1_curr_val == v.val) {
               if (v.items) {
                   $.each(v.items, function(k, v) {
                       if (s2_curr_val == v.val) {
                           if (v.items) {
                               $.each(v.items, function(k, v) {
                                   appendOptionTo($s3, k, v.val, v3,2);
                               });
                           }
                       }
                   });
               }
           }
       });
       if ($s3[0].options.length == 0) {
           appendOptionTo($s3, "...", "", v3,2);
       }
       $s3.change();
   }).change();
   $s3.change(function() {
       $s4.html("");
       if (this.selectedIndex == -1)
           return;
       var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
       var s2_curr_val = $s2[0].options[$s2[0].selectedIndex].value;
       var s3_curr_val = this.options[this.selectedIndex].value;
       if(s3_curr_val == undefined || s3_curr_val == ''){
	   }else{
		   appendOptionTo($s4, "请选择街道", '', v2);
	   }
       $.each(fourSelectData, function(k, v) {
           if (s1_curr_val == v.val) {
               if (v.items) {
                   $.each(v.items, function(k, v) {
                       if (s2_curr_val == v.val) {
                           if (v.items) {
                               $.each(v.items, function(k, v) {
                                   if (s3_curr_val == v.val) {
                                       if (v.items) {
                                           $.each(v.items, function(k, v) {
                                               appendOptionTo($s4, k, v, v4,3);
                                           });
                                       }
                                   }
                               });
                           }
                       }
                   });
               }
           }
       });
       if ($s4[0].options.length == 0) {
           appendOptionTo($s4, "...", "", v4,3);
       }
   }).change();
   function appendOptionTo($o, k, v, d,t) {
       var $opt = $("<option>").text(k).val(v);
       if (v == d) {
           $opt.attr("selected", "selected")
       }
       $opt.appendTo($o);
   }
}
</script>
</html>